<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@page import="java.net.URLEncoder" %>
<%
    try {
        String str = new String(request.getParameter("keywords").toString().getBytes("ISO-8859-1"));
        request.setAttribute("keywords", str);
    } catch (Exception e) {

    }
%>

<jsp:include page="include/menu.jsp"/>

<link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="assets/css/ui.jqgrid.css"/>
<link rel="stylesheet" href="assets/css/ace.min.css"/>
<link type="text/css" rel="stylesheet" href="admin/gallery/css/tn3.css"/>

<div class="page-header">
    <h1>
        图片管理
        <small>
            <i class="icon-double-angle-right"></i> 查看所有图片
        </small>
    </h1>
</div>
<!-- /.page-header -->
<div class="row" id="content" style="align-content: center">
    <div class="mygallery clearfix">
        <div class="tn3 album">
            <h4>Fixed Dimensions</h4>
            <div class="tn3 description">admin/gallery/images with fixed dimensions</div>
            <div class="tn3 thumb">admin/gallery/images/35x35/1.jpg</div>
            <ol>
                <li>
                    <%--<h4>Hohensalzburg Castle</h4>--%>
                    <%--<div class="tn3 description">Salzburg, Austria</div>--%>
                    <a href="../attached/image/20160426/20160426105646_418.jpg">
                        <img src="../attached/image/20160426/20160426105646_418.jpg"/>
                    </a>
                </li>
                <li>
                    <h4>Isolated sandy cove</h4>
                    <div class="tn3 description">Zakynthos island, Greece</div>
                    <a href="admin/gallery/images/620x378/2.jpg">
                        <img src="admin/gallery/images/35x35/2.jpg"/>
                    </a>
                </li>
                <li>
                    <h4>A view from the Old Town</h4>
                    <div class="tn3 description">Herceg Novi, Montenegro</div>
                    <a href="admin/gallery/images/620x378/3.jpg">
                        <img src="admin/gallery/images/35x35/3.jpg"/>
                    </a>
                </li>
                <li>
                    <h4>Walls of the Old Town</h4>
                    <div class="tn3 description">Kotor, Montenegro</div>
                    <a href="admin/gallery/images/620x378/4.jpg">
                        <img src="admin/gallery/images/35x35/4.jpg"/>
                    </a>
                </li>
                <li>
                    <h4>Boat in the port</h4>
                    <div class="tn3 description">Sousse, Tunis</div>
                    <a href="admin/gallery/images/620x378/5.jpg">
                        <img src="admin/gallery/images/35x35/5.jpg"/>
                    </a>
                </li>
                <li>
                    <h4>Wall of the Jain temple</h4>
                    <div class="tn3 description">Jaisalmer, India</div>
                    <a href="admin/gallery/images/620x378/6.jpg">
                        <img src="admin/gallery/images/35x35/6.jpg"/>
                    </a>
                </li>
                <li>
                    <h4>City park</h4>
                    <div class="tn3 description">Negotin, Serbia</div>
                    <a href="admin/gallery/images/620x378/7.jpg">
                        <img src="admin/gallery/images/35x35/7.jpg"/>
                    </a>
                </li>
                <li>
                    <h4>Taj Mahal mausoleum</h4>
                    <div class="tn3 description">Agra, India</div>
                    <a href="admin/gallery/images/620x378/8.jpg">
                        <img src="admin/gallery/images/35x35/8.jpg"/>
                    </a>
                </li>
                <li>
                    <h4>Zante Port</h4>

                    <div class="tn3 description">Zakynthos, Greece</div>
                    <a href="admin/gallery/images/620x378/9.jpg">
                        <img src="admin/gallery/images/35x35/9.jpg"/>
                    </a>
                </li>
                <li>
                    <h4>Rustovo Monastery</h4>
                    <div class="tn3 description">Budva, Montenegro</div>
                    <a href="admin/gallery/images/620x378/10.jpg">
                        <img src="admin/gallery/images/35x35/10.jpg"/>
                    </a>
                </li>
                <li>
                    <h4>The Mezquita, Cathedral and former Great Mosque</h4>
                    <div class="tn3 description">Cordoba, Spain</div>
                    <a href="admin/gallery/images/620x378/11.jpg">
                        <img src="admin/gallery/images/35x35/11.jpg"/>
                    </a>
                </li>
                <li>
                    <h4>Wine Cellars</h4>
                    <div class="tn3 description">Rajac, Serbia</div>
                    <a href="admin/gallery/images/620x378/12.jpg">
                        <img src="admin/gallery/images/35x35/12.jpg"/>
                    </a>
                </li>
            </ol>
        </div>
    </div>
</div>
<!-- /.col -->
</div><!-- /.page-content -->
</div><!-- /.main-content -->
</div><!-- /.main-container-inner -->
</div><!-- /.main-container -->

<style>
    .modal-edit {
        width: 1300px;
    }
</style>
<script type="text/javascript" src="assets/js/eModal.min.js"></script>
<script src="assets/js/date-time/bootstrap-datepicker.min.js"></script>
<script src="assets/js/jqGrid/jquery.jqGrid.min.js"></script>
<script src="assets/js/jqGrid/i18n/grid.locale-cn.js"></script>
<script src="admin/gallery/js/jquery.tn3lite.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var tn1 = $('.mygallery').tn3({
            skinDir: "skins",
            imageClick: "fullscreen",
            image: {
                maxZoom: 2.0,
                crop: true,
                clickEvent: "dblclick",
                transitions: [{
                    type: "blinds"
                }, {
                    type: "grid"
                }, {
                    type: "grid",
                    duration: 460,
                    easing: "easeInQuad",
                    gridX: 1,
                    gridY: 8,
                    // flat, diagonal, circle, random
                    sort: "random",
                    sortReverse: false,
                    diagonalStart: "bl",
                    // fade, scale
                    method: "scale",
                    partDuration: 360,
                    partEasing: "easeOutSine",
                    partDirection: "left"
                }]
            }
        });
    });
</script>
<div style="display:none"></div>
</body>
</html>
